<div class="lv-table-cell-container lv-table-th-container">
  <!-- 是否有checkbox -->
  <ng-container *ngIf="lvShowCheckbox && multiple">
    <div class="lv-cell-extra-check-origin" #lvCellExtraCheckOrigin></div>
    <lv-tooltip class="lv-cell-checkbox-tip" [lvContent]="lvCheckboxTip" [lvContextData]="lvRowsData">
      <label
        lv-checkbox
        class="lv-cell-checkbox"
        lvControl
        (click)="_toggleSelection($event)"
        [ngModel]="isAllCheck"
        [lvIndeterminate]="isHalfCheck"
        [lvDisabled]="lvDisabled"
        lv-popover
        [lvPopoverContent]="lvCustomAllCheck ? extraCheck : ''"
        lvPopoverShowArrow="false"
        lvPopoverClassName="lv-cell-extra-check"
        lvPopoverPosition="rightTop"
        [lvPopoverOrigin]="lvCellExtraCheckOrigin"
        lvPopoverAnimationType="none"
      ></label>
    </lv-tooltip>
  </ng-container>
  <!-- 原内容 -->
  <div class="lv-table-cell-content lv-table-th-content">
    <ng-content></ng-content>
  </div>
  <!-- 操作项 -->
  <!-- <div class='lv-table-th-operation'> -->

  <!-- 排序 -->
  <ng-container *ngIf="lvShowSort">
    <div class="lv-cell-operation-item">
      <lv-sort-header
        [lvSortKey]="lvCellKey"
        [lvDefaultSort]="lvDefaultSort"
        [lvCustomSort]="lvCustomSort"
        [lvDisableSortClear]="lvDisableSortClear"
      ></lv-sort-header>
    </div>
  </ng-container>

  <!-- 过滤 -->
  <ng-container *ngIf="lvShowFilter">
    <div class="lv-cell-operation-item" (mouseover)="filtersTrigger = true" (mouseout)="filtersTrigger = false">
      <i
        [class.active]="activeFilter || filterOpen"
        [lv-icon]="lvFilterIcon"
        lvColorState
        lv-popover
        #popover="lvPopover"
        lvPopoverPosition="bottomRight"
        [lvPopoverContent]="filterSelectTpl"
        lvPopoverTheme="light"
        lvPopoverTrigger="click"
        lvPopoverShowArrow="false"
        lvPopoverClassName="lv-cell-default-filter"
        [lvPopoverBeforeOpen]="popoverBeforeOpen"
        (click)="filterClick($event)"
      ></i>
    </div>
  </ng-container>

  <!-- 提示 -->
  <ng-container *ngIf="lvShowTips"></ng-container>

  <!-- 自定义 -->
  <ng-container *ngIf="lvShowCustom">
    <div class="lv-cell-operation-item lv-cell-custom-operation" (click)="$event.stopPropagation()">
      <ng-content select="[lvCustom]"></ng-content>
    </div>
  </ng-container>
  <!-- </div> -->
</div>

<!-- 分割符 -->
<div class="lv-table-th-deliver" (click)="$event.stopPropagation()"></div>

<!-- resize 辅助线 -->
<div class="lv-table-resize-line lv-display-none" #resizeLine></div>

<!-- filter template -->
<ng-template #filterSelectTpl>
  <div class="lv-filter-select">
    <ng-container *ngIf="lvFilterVirtualScroll; else filterViewTpl">
      <div class="lv-filter-select-container lv-filter-virtual-select-container">
        <lv-select
          [lvOptions]="lvFilters"
          [(ngModel)]="virtualSelectedValue"
          lvCompareWith="key"
          lvInline
          lvVirtualScroll
          [lvVirtualItemSize]="lvFilterVirtualItemSize"
          [lvVirtualMaxBuffer]="lvFilterVirtualMaxBuffer"
          [lvVirtualMinBuffer]="lvFilterVirtualMinBuffer"
          [lvAsync]="lvFilterAsync"
          [lvAsyncFilter]="lvFilterSearchAsync"
          [lvShowFilter]="lvFilterSearch"
          [lvMode]="lvFilterMultiple ? 'multiple' : 'single'"
          [lvFilterMode]="lvFilterMode"
          lvFilterKey="label"
          [lvFilterCaseSensitive]="lvFilterCaseSensitive"
          [lvShowCheckAll]="lvFilterCheckAll"
          [lvContentTemplate]="lvFilterTemplate"
          (ngModelChange)="virtualToggleFilter($event)"
          (lvScrollEnd)="filterScrollEnd($event)"
          (lvScrollingChange)="filterScrollingChange($event)"
          (lvFilterChange)="filterSearchChange($event)"
        ></lv-select>
      </div>
    </ng-container>
    <ng-template #filterViewTpl>
      <div class="lv-filter-select-container">
        <lv-search *ngIf="lvFilterSearch" lvFocus [(ngModel)]="filterSearchKey" (ngModelChange)="filterSearch($event)"></lv-search>

        <!-- 数据为空 -->
        <div class="lv-filter-select-null" (click)="$event.stopPropagation()" *ngIf="!lvFilters?.length">
          <lv-empty [lvImage]="null"></lv-empty>
        </div>

        <ng-container *ngIf="lvFilters?.length">
          <div class="lv-filter-select-item" *ngIf="lvFilterMultiple && lvFilterCheckAll" (click)="checkAllChange()">
            <label lv-checkbox [ngModel]="filterCheckAll" [lvIndeterminate]="filterHalf">{{ 'all' | i18n }}</label>
          </div>
          <div class="lv-filter-select-list">
            <div
              *ngFor="let item of lvFilters"
              class="lv-filter-select-item"
              [ngClass]="{ disabled: !!item.disabled, selected: item.selected, 'lv-filter-select-multiple': lvFilterMultiple }"
              (click)="toggleFilter(item)"
            >
              <label *ngIf="lvFilterMultiple" lv-checkbox [ngModel]="item.selected" lvControl [lvDisabled]="item.disabled"></label>
              <span class="lv-filter-text">
                <ng-container *ngIf="!lvFilterTemplate">{{ item.label }}</ng-container>
                <ng-container *ngIf="lvFilterTemplate">
                  <ng-container *ngTemplateOutlet="lvFilterTemplate; context: { $implicit: item }"></ng-container>
                </ng-container>
              </span>
            </div>
          </div>
        </ng-container>
      </div>
    </ng-template>

    <div class="lv-filter-select-operation">
      <button lv-button (click)="_resetFilter()">{{ 'reset' | i18n }}</button>
      <button *ngIf="!lvFilterAuto" lv-button lvType="primary" (click)="_submitFilter()">{{ 'ok' | i18n }}</button>
    </div>
  </div>
</ng-template>

<!-- extraCheck template -->
<ng-template #extraCheck>
  <lv-group lvDirection="vertical" lvGutter="0.08rem">
    <ng-container *ngFor="let item of extraChecks">
      <label
        lv-checkbox
        class="lv-cell-checkbox"
        lvControl
        [ngModel]="item.key === checkType.SINGLE ? isAllCheck : isFullCheck"
        [lvIndeterminate]="item.key === checkType.SINGLE ? isHalfCheck : isFullHalfCheck"
        (click)="item.onSelect($event)"
      >
        {{ item.label }}
      </label>
    </ng-container>
  </lv-group>
</ng-template>
